<template>
  <!-- 当前任务 -->
  <div class="pagewrapper bg_fff">
    <div class="pagebox h_full">
      <div class="flexbetween mulheader mulheader_pause">
        <div class="flex aligncenter mulh_left">
          <!-- <img src="@/assets/images/finished.png" alt="" class="mr-20" /> -->
          <!-- <img src="@/assets/images/l_pause.png" alt="" class="mr-20" /> -->
          <div class="iloadingbox">
            <div class="iloadbg"></div>
            <img src="@/assets/images/l_start.png" alt="" class="mr-20" />
          </div>

          <span class="f-20 mr-16">已结束</span>
          <span>2024-03-18 14:08 ~ 2024-03-18 14:08</span>
        </div>
        <div class="flex">
          <el-button v-hasPermi="['system:multigroupforward:add']" type="primary" size="small" class="mr-12" @click="handleAdd"
            >再次创建</el-button
          >
          <el-popconfirm
            title="是否确认删除？"
            icon="el-icon-warning"
            @confirm="handleDelete"
          >
            <el-button v-hasPermi="['system:multigroupforward:delete']" slot="reference" size="small">删除</el-button>
          </el-popconfirm>
        </div>
      </div>
      <div class="mulbody flex w_full">
        <div class="bodyleft h_full plr-16">
          <div class="l_title">主讲群</div>
          <div class="l_group p-12 mb-12 flex">
            <img
              src="//qyb-1253970052.cos.ap-shanghai.myqcloud.com/public/wechatdata/avatar/5424982/e9564f7860994fe258a93da3a18c1a2c.png"
              alt=""
            />
            <div class="mul_info pl-8">
              <div class="c_222333 line_h_22">群聊</div>
              <div class="c_888999 f-12 line_h_22">群成员 3</div>
            </div>
          </div>
          <div class="l_title">主讲人</div>
          <div class="memberbox bg_fff p-12 mb-12 flex">
            <img
              src="//qyb-1253970052.cos.ap-shanghai.myqcloud.com/public/wechatdata/avatar/5424982/e9564f7860994fe258a93da3a18c1a2c.png"
              alt=""
            />
            <div class="mul_info pl-8">
              <div class="c_222333 line_h_22">群聊</div>
              <div class="c_f08b00 f-12 line_h_22">@志新</div>
            </div>
          </div>

          <div class="l_title">转播人</div>
          <div class="memberbox bg_fff p-12 mb-12 flex">
            <img
              src="//qyb-1253970052.cos.ap-shanghai.myqcloud.com/public/wechatdata/avatar/5424982/e9564f7860994fe258a93da3a18c1a2c.png"
              alt=""
            />
            <div class="mul_info pl-8">
              <div class="c_222333 line_h_22">群聊</div>
              <div class="c_f08b00 f-12 line_h_22">群成员 3</div>
            </div>
          </div>
        </div>

        <div class="bodycenter">
          <div class="r_header flex aligncenter plr-16 bborder">
            <span class="fw-6">转发内容</span>
            <span
              >（已转发
              <span class="c_ff0200">0</span
              >条，主讲人在主讲群的发言内容在这里会同步显示，并同步转发至右侧转播群内）</span
            >
          </div>
          <div class="bcenter_list">
            <div class="totop flexcenter">到顶了</div>
            <div class="chatitem p-10 flex flexwrap aligncenter justifystart">
              <div class="chattime mr-6">11:48:14</div>
              <div class="chatcontent f-15 c_000 bg_fff">嘤嘤嘤</div>
            </div>
          </div>
        </div>

        <div class="bodyleft plr-16">
          <div class="r_header flexbetween">
            <div>转播群</div>
            <div>
              <el-select
                v-model="queryParams.keyword"
                @change="handleQuery"
                style="width: 100px"
                size="mini"
                placeholder=""
              >
                <el-option
                  v-for="item in statusOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </div>
          </div>

          <div class="memberbox bg_fff p-12 mb-12 flex">
            <img
              src="//qyb-1253970052.cos.ap-shanghai.myqcloud.com/public/wechatdata/avatar/5424982/e9564f7860994fe258a93da3a18c1a2c.png"
              alt=""
            />
            <div class="mul_info pl-8">
              <div class="c_222333 line_h_22">群聊</div>
              <div class="c_888999 f-12 line_h_22">转播人：肖洁</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <add-task v-if="showadd" :visableIf.sync="showadd"/>
  </div>
</template>
<script>
import AddTask from './AddTask.vue'
export default {
  data() {
    return {
      queryParams: {
        keyword: "",
      },
      statusOptions: [
        { name: "全部转播人", id: "" },
        { name: "小J", id: 1 },
        { name: "小J2", id: 2 },
      ],
      showadd:false
    };
  },
  components:{
    AddTask
  },
  methods: {
    handleQuery() {},

    handleDelete() {
      this.$message.success("删除成功");
    },

    handleAdd(){
      this.showadd = true
    }
  },
};
</script>
<style lang="scss" scoped>
.pagebox {
  padding: 16px 16px 0;
}
.mulheader {
  height: 84px;
  background: linear-gradient(
    0deg,
    rgba(82, 196, 26, 0.04),
    rgba(82, 196, 26, 0)
  );
  border-bottom: 1px solid rgba(82, 196, 26, 0.24);
  padding: 0 20px;
}
.mulheader_pause {
  background: linear-gradient(
    0deg,
    rgba(250, 173, 20, 0.04),
    rgba(250, 173, 20, 0)
  );
  border-bottom: 1px solid rgba(250, 173, 20, 0.24);
}
.mulh_left {
  img {
    width: 60px;
    height: 60px;
  }
}
.mulbody {
  height: calc(100% - 84px);
  overflow: hidden;
  overflow-y: auto;
}
.bodyleft {
  width: 268px;
  overflow: hidden;
  overflow-y: auto;
}
.l_title {
  height: 55px;
  line-height: 55px;
  font-weight: 700;
}
.mul_info {
  flex: 1 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.l_group {
  border-radius: 2px;
  background: #eff2fe;
  border: 1px solid #d5ddfb;
}
.memberbox {
  border-radius: 2px;
  border: 1px solid #e9e9e9;
}
.bodycenter {
  flex: 1 0;
  height: 100%;
  border: 1px solid #e9e9e9;
  border-top: none;
  border-bottom: none;
}
.r_header {
  height: 55px;
}
.bborder {
  border-bottom: 1px solid #e9e9e9;
}
.iloadingbox {
  position: relative;
}
.iloadbg {
  position: absolute;
  left: 0;
  right: 0;
  background-image: url("~@/assets/images/orange.png");
  background-repeat: no-repeat;
  background-size: cover;
  height: 60px;
  width: 60px;
  margin-right: 20px;
  animation: processImgLoad 1s linear infinite;
}
@keyframes processImgLoad {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(1turn);
    -ms-transform: rotate(1turn);
    transform: rotate(1turn);
  }
}
.bcenter_list {
  height: calc(100% - 60px);
  overflow: hidden;
  overflow-y: auto;
}
.totop {
  padding: 10px 0;
}
.chatitem {
  flex: 1 1;
  position: relative;
}
.chatcontent {
  max-width: 360px;
  word-break: break-all;
  width: fit-content;
  padding: 6px 12px;
  border: 1px solid #e9e9e9;
  border-radius: 5px;
}
</style>